<div class="content-area">
  <a href="javascript:void(0)" [routerLink]="['/federation']">&lt;&lt;{{'CommonlyUse.back'|translate}}</a>
  <br>
  <h2>{{'FederationOpenFlDetail.name'|translate}}</h2>
  <clr-spinner class="pageLoading" *ngIf="isPageLoading"></clr-spinner>
  <clr-alert [clrAlertClosable]='false' clrAlertType="danger"
    *ngIf="isShowOpenflDetailFailed || isShowParticipantListFailed">
    <clr-alert-item>
      {{errorMessage}}
    </clr-alert-item>
  </clr-alert>
  <div *ngIf="!isPageLoading && !isShowOpenflDetailFailed">
    <br>
    <div class="btn-group btn-sm">
      <button class="btn" (click)="refresh()">
        <cds-icon shape="refresh"></cds-icon> {{'CommonlyUse.refresh'|translate}}
      </button>
      <button class="btn" (click)="openDeleteConfrimModal('federation','')">
        <cds-icon shape="trash"></cds-icon> {{'CommonlyUse.delete'|translate}}
      </button>
    </div>
    <div class="card card1">
      <ul class="list list-show">
        <li>
          <span><b>{{'CommonlyUse.name'|translate}}:</b></span>
          <span>{{openflFederationDetail?.name}}</span>
        </li>
        <li>
          <span><b>{{'CommonlyUse.type'|translate}}:</b></span>
          <span>{{openflFederationDetail?.type}}</span>
        </li>
        <li>
          <span><b>{{'CommonlyUse.description'|translate}}:</b></span>
          <span>{{openflFederationDetail?.description}}</span>
        </li>
        <li>
          <span><b>{{'CommonlyUse.creationTime'|translate}}:</b></span>
          <span>{{openflFederationDetail?.created_at | dateFormat}}</span>
        </li>
        <li>
          <span><b>{{'Federation.domain'|translate}}:</b></span>
          <span>{{openflFederationDetail?.domain}}</span>
        </li>
        <li>
          <div class="customize">
            <span style=" width: 212px;"><b>{{'Federation.customize'|translate}}:</b></span>
            <clr-toggle-wrapper>
              <input *ngIf="openflFederationDetail" type="checkbox" disabled clrToggle name="customize"
                [(ngModel)]="openflFederationDetail.use_customized_shard_descriptor" />
              <label
                [ngClass]="{'true':openflFederationDetail?.use_customized_shard_descriptor, 'false': !openflFederationDetail?.use_customized_shard_descriptor}"></label>
            </clr-toggle-wrapper>
          </div>
        </li>
      </ul>
      <ul class="list list-hide"
        [hidden]="!(openflFederationDetail && openflFederationDetail.use_customized_shard_descriptor) && !envoyConfigLoading">
        <li>
          <span><b>{{'Federation.sample'|translate}}:</b></span>
          <span>{{openflFederationDetail?.shard_descriptor_config.sample_shape|json}}</span>
        </li>
        <li>
          <span><b>{{'Federation.target'|translate}}:</b></span>
          <span>{{openflFederationDetail?.shard_descriptor_config.target_shape|json}}</span>
        </li>
        <li>
          <span><b>{{'Federation.pythonFiles'|translate}}:</b></span>
          <span *ngFor="let item of openflFederationDetail?.fileList"> {{item}}</span>
        </li>
        <li>
          <span><b>{{'Federation.envoyConfig'|translate}}</b></span>
          <div class="yaml-warp">
            <textarea style="margin-top: 0px;" class="deployment-yaml" id="yaml" name="description" disabled></textarea>
          </div>
        </li>
      </ul>
      <clr-spinner class="pageLoading" *ngIf="envoyConfigLoading"></clr-spinner>
    </div>
    <br>
    <h3 class="sub">
      <cds-icon shape="thin-client"></cds-icon> {{'FederationOpenFlDetail.director'| translate}}
    </h3>
    <button type="button" class="btn btn-sm" [routerLink]="['/federation', 'openfl', uuid,'director','new']"
      *ngIf="!director">
      <cds-icon solid shape="plus-circle"></cds-icon> {{'CommonlyUse.new'|translate}}
    </button>
    <clr-alert class="exchangealert" clrAlertType="info" [clrAlertClosable]='false' *ngIf="!director">
      {{'FederationOpenFlDetail.nodirector'| translate}}</clr-alert>
    <table class="table" *ngIf="director">
      <thead>
        <tr>
          <th class="left"><span>{{'FederationOpenFlDetail.directorName'|translate}}</span></th>
          <th><span>{{'CommonlyUse.description'|translate}}</span></th>
          <th><span>{{'CommonlyUse.creationTime'|translate}}</span></th>
          <th><span>{{'FederationDetail.accessInfo'| translate}}</span></th>
          <th><span>{{'EndpointMg.name'|translate}}</span></th>
          <th><span>{{'InfraProvider.name'|translate}}</span></th>
          <th><span>{{'NewCluster.namespace'| translate}}</span></th>
          <th><span>{{'CommonlyUse.status'|translate}}</span></th>
          <th><span>{{'CommonlyUse.action'|translate}}</span></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="left" (click)="toDetail('director', director.uuid, null)"><a
              href="javascript:void(0)">{{director.name}}</a></td>
          <td>{{director.description}}</td>
          <td>{{director.created_at | dateFormat}}</td>
          <td>
            <clr-signpost *ngIf="hasAccessInfo(director.access_info)">
              <clr-signpost-content *clrIfOpen>
                <clr-datagrid>
                  <clr-dg-column [clrDgField]="'name'">{{'CommonlyUse.name'|translate}}</clr-dg-column>
                  <clr-dg-column>{{'EndpointDetail.host'|translate}}</clr-dg-column>
                  <clr-dg-column>{{'CommonlyUse.port'|translate}}</clr-dg-column>
                  <clr-dg-column>{{'ExchangeNew.serviceType'|translate}}</clr-dg-column>
                  <clr-dg-column>FQDN</clr-dg-column>
                  <clr-dg-column>TLS</clr-dg-column>

                  <clr-dg-row *clrDgItems="let director of directorAccessInfoList" [clrDgItem]="director">
                    <clr-dg-cell>{{director.name}}</clr-dg-cell>
                    <clr-dg-cell>{{director.host}}</clr-dg-cell>
                    <clr-dg-cell>{{director.port}}</clr-dg-cell>
                    <clr-dg-cell>{{director.service_type ? director.service_type : 'N/A'}}</clr-dg-cell>
                    <clr-dg-cell>{{director.fqdn ? director.fqdn : 'N/A'}}</clr-dg-cell>
                    <clr-dg-cell>{{director.tls}}</clr-dg-cell>
                  </clr-dg-row>
                </clr-datagrid>
              </clr-signpost-content>
            </clr-signpost>
          </td>
          <td>{{director.endpoint_name}}</td>
          <td>{{director.infra_provider_name}}</td>
          <td>{{director.namespace}}</td>
          <td><span class="label" [class.label-info]="director.status===4||director.status===5||director.status===6"
              [class.label-success]="director.status===1" [class.label-danger]="director.status===3"
              [class.label-warning]="director.status===2">{{constantGather('director',
              director.status).name | translate}}</span></td>
          <td><a href="javascript:void(0)"
              (click)="openDeleteConfrimModal('director',director.uuid)">{{'CommonlyUse.delete'|translate}}</a></td>
        </tr>
      </tbody>
    </table>
    <br>
    <h3 class="sub">
      <cds-icon shape="nodes"></cds-icon> {{'FederationOpenFlDetail.client'| translate}}
    </h3>
    <clr-tabs class="envoy">
      <clr-tab>
        <button clrTabLink>{{'FederationOpenFlDetail.envoy'| translate}}</button>
        <ng-template [(clrIfActive)]="isEnvoy">
          <clr-tab-content>
            <div class="labels-filter">
              <section style="position: absolute; right: 0;">
                <span style="margin-right: 10px;">{{filterString}}</span>
                <button class="btn btn-sm" *ngIf="filterString"
                  (click)="recycleSearchOptions()">{{'CommonlyUse.reset'|translate}}</button>
                <button class="btn btn-sm" *ngIf="!filterString"
                  (click)="showSearchOptions()">{{'CommonlyUse.filter'|translate}}</button>
              </section>
              <ul *ngIf="showSearchFlag">
                <li>
                  <cds-icon class="circle" shape="plus-circle" (click)="addSearchOption()"></cds-icon>
                </li>
                <li *ngFor="let search of searchList index as i" class="clr-label-content">
                  <label>key:</label>
                  <input [(ngModel)]="search.key" type="text" name='key'>
                  <label>value:</label>
                  <input [(ngModel)]="search.value" type="text" name='value'>
                  <cds-icon *ngIf="searchList.length > 1" class="circle times" shape="times-circle"
                    (click)="delSearchOption(i)" solid></cds-icon>
                </li>
                <li>
                  <button type="submit" class="btn btn-sm btn-primary" [disabled]="!submitFilterDisbabled"
                    (click)="submitFilter()">{{'CommonlyUse.submit'| translate}}</button>
                  <button type="submit" class="btn btn-sm btn-primary"
                    (click)="showSearchFlag=false">{{'CommonlyUse.cancel'| translate}}</button>
                </li>
              </ul>
            </div>
            <button class="btn btn-sm" [disabled]="seletedEnvoys.length===0"
              (click)="openDeleteConfrimModal('multipleEnvoy','')">{{'FederationOpenFlDetail.multipleDeletion'|translate}}</button>
            <table class="table">
              <thead>
                <tr>
                  <th class="checkbox-item">
                    <input [(ngModel)]='allSelect' type="checkbox" checked />
                  </th>
                  <th class="left"><span>{{'CommonlyUse.name'|translate}}</span></th>
                  <th><span>{{'CommonlyUse.description'|translate}}</span></th>
                  <th><span>{{'CommonlyUse.creationTime'|translate}}</span></th>
                  <th><span>{{'EndpointMg.name'|translate}}</span></th>
                  <th><span>{{'InfraProvider.name'|translate}}</span></th>
                  <th><span>{{'NewCluster.namespace'|translate}}</span></th>
                  <th><span>{{'FederationOpenFlDetail.token'|translate}}</span></th>
                  <th><span>{{'CommonlyUse.status'|translate}}</span></th>
                  <th><span>{{'FederationOpenFlDetail.labels'|translate}}</span></th>
                  <th><span>{{'CommonlyUse.action'|translate}}</span></th>
                </tr>
              </thead>
              <tbody *ngIf="envoylist && envoylist.length > 0">
                <tr *ngFor="let envoy of envoylist">
                  <td class="checkbox-item">
                    <input *ngIf="envoy.status!=2" [(ngModel)]='envoy.selected' type="checkbox" checked />
                  </td>
                  <td class="left" (click)="toDetail('envoy', envoy.uuid, envoy)"><a
                      href="javascript:void(0)">{{envoy.name}}</a></td>
                  <td>{{envoy.description}}</td>
                  <td>{{envoy.created_at| dateFormat}}</td>
                  <td>{{envoy.endpoint_name}}</td>
                  <td>{{envoy.infra_provider_name}}</td>
                  <td>{{envoy.namespace}}</td>
                  <td style="overflow-wrap: break-word;">{{envoy.token_name}}</td>
                  <td>
                    <span class="label" [class.label-info]="envoy.status===7 || envoy.status===5 || envoy.status===6"
                      [class.label-success]="envoy.status===1" [class.label-danger]="envoy.status===3"
                      [class.label-warning]="envoy.status===2">{{constantGather('envoy',
                      envoy.status).name | translate}}</span>
                  </td>
                  <td *ngIf="envoy.labels.length <=2">
                    <span class="label" *ngFor="let item of envoy.labels">{{item.key}}:{{item.value}}</span>
                  </td>
                  <td *ngIf="envoy.labels.length >2">
                    <span class="label">{{envoy.labels[0].key}}:{{envoy.labels[0].value}}</span>
                    <span class="label">{{envoy.labels[1].key}}:{{envoy.labels[1].value}}</span>
                    <span class="ellipsis" (mouseenter)="mouseEnter(envoy)"
                      (mouseout)="envoy.showLabelListFlag = false">...</span>
                    <div [style]="{
                        top: -55 - showLabelListTop + 'px'
                      }" class="label-list" (mouseenter)="envoy.showLabelListFlag = true"
                      *ngIf="envoy.showLabelListFlag">
                      <span class="label" *ngFor="let item of envoy.labels">{{item.key}}:{{item.value}}</span>
                      <div></div>
                    </div>
                  </td>
                  <td>
                    <a href="javascript:;" *ngIf="envoy.status!=2"
                      (click)="openDeleteConfrimModal('envoy',envoy.uuid)">{{'CommonlyUse.delete'|translate}}</a>
                  </td>
                </tr>
              </tbody>
              <tbody *ngIf="!envoylist || envoylist.length < 1">
                <tr class="none">
                  <img src="assets/none.jpg">
                </tr>
              </tbody>
            </table>
          </clr-tab-content>
        </ng-template>
      </clr-tab>
      <clr-tab>
        <button clrTabLink>{{'FederationOpenFlDetail.token'| translate}}</button>
        <clr-tab-content>
          <button type="button" style="margin-top: 10px;" class="btn btn-sm" *ngIf="director && director.status === 1"
            (click)="newTokenModal=true">
            <cds-icon solid shape="plus-circle"></cds-icon> {{'CommonlyUse.new'|translate}}
          </button>
          <clr-alert class="exchangealert" clrAlertType="info" [clrAlertClosable]='false'
            *ngIf="!director || director.status !== 1">
            {{'FederationOpenFlDetail.nodirectorToken'| translate}}</clr-alert>
          <clr-datagrid>
            <clr-dg-column>{{'CommonlyUse.name'|translate}}</clr-dg-column>
            <clr-dg-column>UUID</clr-dg-column>
            <clr-dg-column>{{'CommonlyUse.expirationDate'|translate}}</clr-dg-column>
            <clr-dg-column>{{'FederationOpenFlDetail.token'|translate}}</clr-dg-column>
            <clr-dg-column>{{'FederationOpenFlDetail.limit'|translate}}</clr-dg-column>
            <clr-dg-column>{{'FederationOpenFlDetail.labels'|translate}}</clr-dg-column>
            <clr-dg-column>{{'CommonlyUse.action'|translate}}</clr-dg-column>
            <clr-dg-row *clrDgItems="let token of tokenList" [clrDgItem]="token">
              <clr-dg-cell>
                {{token.name}}
              </clr-dg-cell>
              <clr-dg-cell>
                {{token.uuid}}
              </clr-dg-cell>
              <clr-dg-cell>
                {{token.expired_at | dateFormat}}
              </clr-dg-cell>
              <clr-dg-cell>
                <clr-password-container style="margin-top: 0px">
                  <input clrPassword placeholder="Password" name="password" [ngModel]="token.token_str"
                    type="password" />
                </clr-password-container>
              </clr-dg-cell>
              <clr-dg-cell>
                {{token.limit}} ({{token.used}} used)
              </clr-dg-cell>
              <clr-dg-cell *ngIf="token.labels.length <=2">
                <span class="label" *ngFor="let item of token.labels">{{item.key}}:{{item.value}}</span>
              </clr-dg-cell>
              <clr-dg-cell *ngIf="token.labels.length > 2">
                <span class="label">{{token.labels[0].key}}:{{token.labels[0].value}}</span>
                <span class="label">{{token.labels[1].key}}:{{token.labels[1].value}}</span>
                <span>...</span>
              </clr-dg-cell>
              <clr-dg-cell>
                <a (click)="deleteUUID=token.uuid; deleteType='token';openDeleteModal=true"
                  href="javascript:;">{{'CommonlyUse.delete'|translate}}</a>
              </clr-dg-cell>
            </clr-dg-row>
            <clr-dg-detail *clrIfDetail="let token">
              <clr-dg-detail-header>{{token.name}}</clr-dg-detail-header>
              <clr-dg-detail-body>
                <div class="card card1">
                  <ul class="list">
                    <li>
                      <span><b>{{'CommonlyUse.description'|translate}}:</b></span>
                      <span>{{token?.description}}</span>
                    </li>
                    <li>
                      <span><b>UUID:</b></span>
                      <span>{{token?.uuid}}</span>
                    </li>
                    <li>
                      <span><b>{{'FederationOpenFlDetail.token'|translate}}:</b></span>
                      <span>{{token?.token_str}}</span>
                    </li>
                    <li>
                      <span><b>{{'CommonlyUse.creationTime'|translate}}:</b></span>
                      <span>{{token.creation_time | dateFormat}} </span>
                    </li>
                    <li>
                      <span><b>{{'CommonlyUse.expirationDate'|translate}}:</b></span>
                      <span>{{token.expired_at | dateFormat}}</span>
                    </li>
                    <li>
                      <span><b>{{'FederationOpenFlDetail.limit'|translate}}:</b></span>
                      <span>{{token?.limit}}({{token.used}} used)</span>
                    </li>
                    <li>
                      <span><b>{{'FederationOpenFlDetail.labels'|translate}}:</b></span>
                      <span class="label" *ngFor="let item of token.labels">{{item.key}}:{{item.value}}</span>
                    </li>
                  </ul>
                </div>
              </clr-dg-detail-body>
            </clr-dg-detail>
          </clr-datagrid>
        </clr-tab-content>
      </clr-tab>
    </clr-tabs>
  </div>
</div>

<clr-modal [(clrModalOpen)]="openDeleteModal">
  <h3 class="modal-title">{{'CommonlyUse.delete'| translate}}</h3>
  <div class="modal-body">
    <div *ngIf="(!multipleDeletion && isDeleteSubmit && isDeleteFailed)" class="alert alert-danger" role="alert">
      <div class="alert-items">
        <div class="alert-item static">
          <div class="alert-icon-wrapper">
            <cds-icon class="alert-icon" shape="exclamation-circle"></cds-icon>
          </div>
          <span class="alert-text">
            {{errorMessage}}
          </span>
        </div>
      </div>
    </div>
    <div *ngIf="(multipleDeletion && isDeleteSubmit && isDeleteFailed)">
      <div class="alert alert-danger" role="alert" *ngFor="let envoy of seletedEnvoys">
        <div class="alert-items" *ngIf="envoy.deleteFailed && envoy.deleteSubmit">
          <div class="alert-item static">
            <div class="alert-icon-wrapper">
              <cds-icon class="alert-icon" shape="exclamation-circle"></cds-icon>
            </div>
            <span class="alert-text">
              {{envoy.errorMessage}}
            </span>
          </div>
        </div>
      </div>
    </div>
    <h5 *ngIf="!multipleDeletion">{{'FederationDetail.isDelete'|translate}} {{deleteType}}?</h5>
    <h5 *ngIf="multipleDeletion && !deleteEvonyAllSuccess">
      {{'FederationOpenFlDetail.multipleEnvoysDeletionMessage'|translate}}</h5>
    <ul *ngIf="multipleDeletion">
      <li *ngFor="let envoy of seletedEnvoys">
        <span class="selectedEnvoy"><b style="color: #247bae;">{{envoy.name}}</b></span>
        <div *ngIf="envoy.deleteSubmit && !envoy.deleteFailed && !envoy.deleteSuccess">
          <clr-spinner [clrInline]="true"></clr-spinner>
          <span>{{'CommonlyUse.deleting'| translate}} ... </span>
        </div>
        <cds-icon shape="check-circle" style="color: green;" size="md"
          *ngIf="envoy.deleteSubmit && envoy.deleteSuccess"></cds-icon>
        <cds-icon shape="exclamation-circle" style="color: red;" size="md"
          *ngIf="envoy.deleteSubmit && envoy.deleteFailed"></cds-icon>
      </li>
      <br>
    </ul>
    <clr-toggle-container
      *ngIf="deleteType==='director' || deleteType==='envoy' || (deleteType==='multipleEnvoy' && !deleteEvonyAllSuccess)"
      class="clr-toggle-right">
      <clr-toggle-wrapper>
        <input type="checkbox" clrToggle name="options" required value="forceRemove" [(ngModel)]="forceRemove" />
        <label>{{'FederationDetail.forceRemove'|translate}}</label>
      </clr-toggle-wrapper>
    </clr-toggle-container>
  </div>
  <div class="modal-footer">
    <div *ngIf="isDeleteSubmit && !isDeleteFailed && !multipleDeletion">
      <span>{{'CommonlyUse.deleting'| translate}} ... </span>
      <clr-spinner [clrInline]="true"></clr-spinner>
    </div>
    <button type="button" class="btn btn-outline"
      (click)="multipleDeletion ? reloadCurrentRoute() : openDeleteModal=false"
      *ngIf="(multipleDeletion && !deleteEvonyAllSuccess) || !multipleDeletion">{{'CommonlyUse.cancel'|
      translate}}</button>
    <button type="submit" class="btn btn-primary" (click)="delete()"
      *ngIf="(multipleDeletion && !deleteEvonyAllSuccess) || !multipleDeletion">{{'CommonlyUse.delete'|
      translate}}</button>
    <button type="submit" class="btn btn-primary" (click)="reloadCurrentRoute()"
      *ngIf="multipleDeletion && deleteEvonyAllSuccess">{{'CommonlyUse.close'| translate}}</button>
  </div>
</clr-modal>

<clr-modal [(clrModalOpen)]="newTokenModal" class="modal-xl">
  <h3 class="modal-title">{{'FederationOpenFlDetail.addToken'|translate}}</h3>
  <div class="modal-body">
    <form clrForm [formGroup]="newTokenForm">
      <div class="card card-width-auto ">
        <div class="container-token">
          <clr-input-container>
            <label class="clr-control-label clr-col-12 clr-col-md-3">{{'CommonlyUse.name'|translate}}</label>
            <input class="clr-control-container clr-col-md-8 clr-col-12" clrInput name="tokenName"
              formControlName="tokenName" />
            <clr-control-error
              *ngIf="!newTokenForm.get('tokenName')?.errors?.minlength && !newTokenForm.get('tokenName')?.errors?.maxlength">
              {{newTokenForm.get('tokenName')?.errors?.emptyMessage ||
              newTokenForm.get('tokenName')?.errors?.message | translate}}</clr-control-error>
            <clr-control-error *ngIf="newTokenForm.get('tokenName')?.errors?.minlength">{{'CommonlyUse.few'
              |
              translate}}{{newTokenForm.get('tokenName')?.errors?.minlength.requiredLength}}{{'CommonlyUse.character'
              | translate}}</clr-control-error>
            <clr-control-error *ngIf="newTokenForm.get('tokenName')?.errors?.maxlength">{{'CommonlyUse.many'
              |
              translate}}{{newTokenForm.get('tokenName')?.errors?.maxlength.requiredLength}}{{'CommonlyUse.character'
              | translate}}</clr-control-error>
          </clr-input-container>
          <clr-textarea-container>
            <label>{{'CommonlyUse.description'|translate}}</label>
            <textarea style="width: 80%; margin-left: 40px;" clrTextarea class="t2" name="description"
              formControlName="description"></textarea>
          </clr-textarea-container>
          <clr-date-container>
            <label class="clr-control-label clr-col-12 clr-col-md-3">{{'CommonlyUse.expirationDate'|translate}}:</label>
            <input class="clr-control-container clr-col-md-8 clr-col-12" type="date" [(clrDate)]='date'
              name="expirationDate" formControlName="expirationDate" [min]="minDate" />
          </clr-date-container>
          <clr-input-container>
            <label
              class="clr-control-label clr-col-12 clr-col-md-3">{{'FederationOpenFlDetail.limit'|translate}}:</label>
            <input class="clr-control-container clr-col-md-8 clr-col-12" clrInput name="limit"
              formControlName="limit" />
            <clr-control-error *ngIf="newTokenForm.get('limit')?.errors">
              {{newTokenForm.get('limit')?.errors?.emptyMessage || newTokenForm.get('limit')?.errors?.message |
              translate}}
            </clr-control-error>
          </clr-input-container>
          <div class="clr-label-container">
            <div class="clr-label-title">
              <label class="clr-col-12 clr-col-md-3"><b>{{'FederationOpenFlDetail.labels'|translate}}:</b></label>
              <cds-icon class="circle" shape="plus-circle" (click)="addLabelFlag=true"></cds-icon>
              <div style="width: 300px;">
                <i class="label label-purple" *ngFor="let label of labelList index as i">
                  {{label.key}}: {{label.value}}
                  <cds-icon shape="times" (click)="delLabel(i)" class="times"></cds-icon>
                </i>
              </div>
            </div>
            <div class="clr-label-content" *ngIf="addLabelFlag">
              <label>key:</label>
              <input type="text" [(ngModel)]="labelKey" [ngModelOptions]="{standalone: true}">
              <label>value:</label>
              <input type="text" [(ngModel)]="labelValue" [ngModelOptions]="{standalone: true}">
              <cds-icon class="circle" shape="check-circle" (click)='addLabel()' solid></cds-icon>
              <cds-icon class="circle times" shape="times-circle" (click)="cancelLabel()" solid></cds-icon>
            </div>
            <clr-alert *ngIf="createTokenFail" [clrAlertClosable]='false' clrAlertType="danger">
              <clr-alert-item>
                {{errorMessage}}
              </clr-alert-item>
            </clr-alert>
            <div class="modal-footer">
              <div *ngIf="newTokenModal && newTokenLoading">
                <span>{{'CommonlyUse.creating'| translate}} ... </span>
                <clr-spinner [clrInline]="true"></clr-spinner>
              </div>
              <button type="button" class="btn btn-outline"
                (click)="newTokenModal=false;newTokenLoading=false;resetToken()">{{'CommonlyUse.cancel'|
                translate}}</button>
              <button type="submit" class="btn btn-primary" [disabled]="createTokenDisabled"
                (click)="createToken()">{{'CommonlyUse.Create'| translate}}</button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</clr-modal>